<template>
	<view class="my-bg" :style="{ backgroundImage: 'url(' + bgImageUrl + ')' }">
		<uv-navbar :fixed="false" leftIconSize="20" bgColor="transparent" title="用户主页" @leftClick="leftClick" :safeAreaInsetTop="true">
		</uv-navbar>
		<view class="rank-list">
			<view class="avatar-box">
				<image v-if="userstore.userPageInfo.avatar!=''" :src="baseImgurl+'/'+userstore.userPageInfo.avatar" mode="aspectFill"></image>
				<image src="@/static/images/avatar.png" mode="aspectFill" v-else></image>
			</view>
			<view class="rank-info">
				<view class="rank-item">
					<view class="nickname">
						{{userstore.userPageInfo.username}}
					</view>
					<view class="auth" v-if="userstore.userPageInfo.examine==0">
						未认证
					</view>
					<view class="self-auth" v-if="userstore.userPageInfo.examine==1">
						<image src="@/static/images/self.png" mode="widthFix"></image>
						<text class="self">个人</text>
					</view>
					<view class="qiye-auth" v-if="userstore.userPageInfo.examine==2">
						<image src="@/static/images/qiye.png" mode="widthFix"></image>
						<text class="qiye">企业</text>
					</view>
				</view>
				<view class="adress-info">
					<view class="age-tips" v-if="userstore.userPageInfo.sex!=0" :style="[{backgroundColor:(userstore.userPageInfo.sex==1?'#D9EAFF':'#fff1f3')}]">
						<image v-if="userstore.userPageInfo.sex==1" src="@/static/images/man.png" mode="widthFix">
						</image>
						<image v-if="userstore.userPageInfo.sex==2" src="@/static/images/women.png" mode="widthFix">
						</image>
						<view :class="[userstore.userPageInfo.sex==1? 'man-age':'woman-age']">
							{{userstore.userPageInfo.age}}后
						</view>
					</view>
					<view class="age_noselect" v-else>
						{{userstore.userPageInfo.sex_text}}
					</view>
					<view class="city-address">
						{{userstore.userPageInfo.province_text}} {{userstore.userPageInfo.city_text}}
					</view>
					<view class="city-address">
						ID：{{userstore.userPageInfo.account}}
					</view>
				</view>
			</view>
		</view>
		<view class="introduce">
			{{userstore.userPageInfo.desc}}
		</view>
		<view class="fans-num">
			<view class="left-item">
				<view class="followers-item">
					<view class="followers-num">
						{{userstore.userPageInfo.follow_count}}
					</view>
					<view class="followers-title">
						关注
					</view>
				</view>
				<view class="followers-item" style="padding-left: 60rpx;">
					<view class="followers-num">
						{{userstore.userPageInfo.fans_count}}
					</view>
					<view class="followers-title">
						粉丝
					</view>
				</view>
				<view class="followers-item" style="padding-left: 60rpx;">
					<view class="followers-num">
						{{userstore.userPageInfo.share_count}}
					</view>
					<view class="followers-title">
						已邀
					</view>
				</view>
			</view>
			<view class="right-item" v-if="userstore.userPageInfo.is_main==0">
				<view class="follower-btn" v-if="userstore.userPageInfo.relationship==0" @click="follower(0)">
					关注
				</view>
				<view class="send-btn" @click="toChat" v-if="userstore.userPageInfo.relationship==2||userstore.userPageInfo.relationship==3">
					发消息
				</view>
				<view class="send-message" v-if="userstore.userPageInfo.relationship==0">
					<image src="/pages/user/static/images/message.png" mode="widthFix"></image>
				</view>
				<view class="send-message" @click="cancelFollowRef.open()" v-if="userstore.userPageInfo.relationship==2||userstore.userPageInfo.relationship==3">
					<image v-if="userstore.userPageInfo.relationship==2" src="/pages/user/static/images/follower.png" mode="widthFix"></image>
					<image v-if="userstore.userPageInfo.relationship==3" src="@/static/images/interrelation.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view style="margin-top: 60rpx;">
			<uv-tabs :scrollable="false" lineColor="#FE3052" :inactiveStyle="{ color: '#999' }" :activeStyle="{color:'#222'}" :list="list" @click="clickTab"></uv-tabs>
		</view>
	</view>
	<!-- 找伴任务 -->
	<view v-if="currentIndex==0">
		<!-- 瀑布流布局 -->
		<view style="padding: 30rpx;">
			<scroll-view scroll-y="true" style="height: 800rpx;" @scrolltolower="scrollPage2" v-if="userTaskList.length>0">
				<FriendList :list="userTaskList" type='usermark' ></FriendList>
			</scroll-view>
			<view style="margin-top: 100rpx;" v-if="userTaskList.length==0">
				<KongList title="列表为空"></KongList>
			</view>
		</view>
	</view>
	<!-- 发布活动 -->
	<view style="padding-bottom: 100rpx;" v-if="currentIndex==1" >
		<scroll-view scroll-y="true" style="height: 800rpx;" @scrolltolower="scrollPage" v-if="userActivityList.length>0">
			<ReleaseActiveList :list="userActivityList" ishome="home" >
			</ReleaseActiveList>
		</scroll-view>
		<view style="margin-top: 100rpx;" v-if="userActivityList.length==0">
			<KongList title="列表为空"></KongList>
		</view>
	</view>
	<!-- 报名活动 -->
	<view style="padding-bottom: 100rpx;" v-if="currentIndex==2">
		<!-- 如果进入的主页不是本人的主页 -->
		<view v-if="userstore.userPageInfo.is_main==0">
			<KongList title="仅互相关注可见"  v-if="userstore.userPageInfo.relationship!=3&&userstore.userPageInfo.is_main==0">
			</KongList>
			<scroll-view scroll-y="true" style="height: 800rpx;" @scrolltolower="scrollPage1" v-if="userstore.userPageInfo.relationship==3&&userApplyList.length>0">
				<ReleaseActiveList :list="userApplyList" ishome="home" isReleasePage="false"></ReleaseActiveList>
			</scroll-view>
			<view style="margin-top: 100rpx;">
				<KongList title="列表为空" v-if="userApplyList.length==0&&userstore.userPageInfo.relationship==3">
				</KongList>
			</view>
		</view>
		<!-- 是本人主页 -->
		<view v-if="userstore.userPageInfo.is_main==1">
			<scroll-view scroll-y="true" style="height: 800rpx;" @scrolltolower="scrollPage1" v-if="userApplyList.length>0">
				<ReleaseActiveList :list="userApplyList" ishome="home"></ReleaseActiveList>
			</scroll-view>
			<view style="margin-top: 100rpx;">
				<KongList title="列表为空" v-if="userApplyList.length==0"></KongList>
			</view>
		</view>

	</view>

	<!-- 取消关注 -->
	<uv-popup ref="cancelFollowRef" mode="center" :round="15" :safeAreaInsetBottom="false">
		<view class="register-popup" style="width: 630rpx;">
			<view class="register-title">
				<view class="title">
					提示
				</view>
			</view>
			<view class="tips" style="padding: 100rpx 0 20rpx 0; ">
				确定不再关注ta了？
			</view>
			<view class="footer-btn">
				<view class="cancel" @click="cancelFollowRef.close()">
					取消
				</view>
				<view class="confirm" @click="follower(1)">
					确定
				</view>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue';
	import {
		throttle
	} from '@/utils/utils.js'
	import {
		useUserStore
	} from '@/store/modules/user.js'
	const userstore = useUserStore()
	import {
		useActiveStore
	} from '@/store/modules/active.js'
	const activeStore = useActiveStore()
	import FriendList from '@/components/FriendList.vue';
	import ReleaseActiveList from '@/components/ReleaseActiveList.vue';
	import KongList from '@/components/KongList.vue'
	const bgImageUrl = ref('https://tazisocializing.pusiyun.cn/uploads/20240721/2680d77b9ff79e0eee368834371475a0.png')
	const baseImgurl = ref('')
	const currentIndex = ref(0)
	const cancelFollowRef = ref()
	const userId = ref('')
	const list = reactive([{
			name: 'TA的找伴'
		}, {
			name: 'TA的活动'
		},
		{
			name: '参加的活动'
		}
	])
	// 参加的活动
	const applyFormData = reactive({
		page: 1,
		loadStatus: 'loadmore'
	})
	// 发布的活动
	const releaseFormData = reactive({
		page: 1,
		loadStatus: 'loadmore'
	})
	// 发布的找伴
	const friendFormData = reactive({
		page: 1,
		loadStatus: 'loadmore'
	})
	const userApplyList = ref([])
	const userActivityList = ref([])
	const userTaskList = ref([])
	onLoad((options) => {
		baseImgurl.value = uni.getStorageSync('baseUrl')
		userId.value = options.userId
		userstore.getUserPage({
			user_id: userId.value
		})
		getUserTaskList()
		// getUserActivityList()
		// getBannerList()
	})
	// 获取banner图
	// const getBannerList = async () => {
	// 	let res = await activeStore.getBannerList({
	// 		position: 4
	// 	})
	// 	if (res.code == 200) {
	// 		bgImageUrl.value = uni.getStorageSync('baseUrl') + res.data[0].image
	// 	}
	// }
	const scrollPage = () => {
		if (releaseFormData.loadStatus == 'nomore') {
			return uni.$uv.toast('没有更多了~')
		}
		releaseFormData.page++
		getUserActivityList()
	}
	const scrollPage1 = () => {
		if (applyFormData.loadStatus == 'nomore') {
			return uni.$uv.toast('没有更多了~')
		}
		applyFormData.page++
		getUserApplyList()
	}
	const scrollPage2 = () => {
		if (friendFormData.loadStatus == 'nomore') {
			return uni.$uv.toast('没有更多了~')
		}
		friendFormData.page++
		getUserTaskList()
	}
	// 关注or取关
	const follower = throttle(async (type) => {
		if (type == 0) {
			let res = await userstore.followOrClose({
				id: userstore.userPageInfo.id,
				type: '0'
			})
			if (res.code == 200) {
				uni.$uv.toast('关注成功')
				userstore.getUserPage({
					user_id: userId.value
				})
				applyFormData.page = 1
				userApplyList.value = []
				getUserApplyList()
			}
		} else {
			let res = await userstore.followOrClose({
				id: userstore.userPageInfo.id,
				type: '1'
			})
			if (res.code == 200) {
				uni.$uv.toast('取关成功')
				userstore.getUserPage({
					user_id: userId.value
				})
				cancelFollowRef.value.close()
				applyFormData.page = 1
				userApplyList.value = []
				getUserApplyList()
			}
		}
	}, 200)
	const clickTab = (item) => {
		currentIndex.value = item.index
		if (currentIndex.value == 0) {
			friendFormData.page = 1
			userTaskList.value = []
			getUserTaskList()

		} else if (currentIndex.value == 1) {
			releaseFormData.page = 1
			userActivityList.value = []
			getUserActivityList()

		} else {
			applyFormData.page = 1
			userApplyList.value = []
			getUserApplyList()
		}
	}
	const leftClick = () => {
		uni.navigateBack()
	}
	// 获取活动列表
	const getUserApplyList = async () => {
		let params = {
			lat: uni.getStorageSync('latitude'),
			lng: uni.getStorageSync('longitude'),
			page: applyFormData.page,
			user_id: userId.value
		}
		applyFormData.loadStatus = 'loading'
		let res = await userstore.getUserApplyList(params)
		if (res.code == 200 && res.data) {
			if (applyFormData.page == 1) {
				userApplyList.value = res.data.data
			} else {
				userApplyList.value = userApplyList.value.concat(res.data.data)
			}
			// 判断是否还有数据
			if (res.data.current_page >= res.data.last_page) {
				applyFormData.loadStatus = 'nomore'
			} else {
				applyFormData.loadStatus = 'loadmore'
			}
		} else {
			applyFormData.loadStatus = 'nomore'
		}
	}
	// 获取发布的活动列表
	const getUserActivityList = async () => {
		releaseFormData.loadStatus = 'loading'
		let res = await userstore.getUserActivityList({
			lat: uni.getStorageSync('latitude'),
			lng: uni.getStorageSync('longitude'),
			page: releaseFormData.page,
			user_id: userId.value
		})
		if (res.code == 200 && res.data) {
			if (releaseFormData.page == 1) {
				userActivityList.value = res.data.data
			} else {
				userActivityList.value = userActivityList.value.concat(res.data.data)
			}
			// 判断是否还有数据
			if (res.data.current_page >= res.data.last_page) {
				releaseFormData.loadStatus = 'nomore'
			} else {
				releaseFormData.loadStatus = 'loadmore'
			}
		} else {
			releaseFormData.loadStatus = 'nomore'
		}
	}
	// 获取发布找伴列表
	const getUserTaskList = async () => {
		friendFormData.loadStatus = 'loading'
		let res = await userstore.getUserTaskList({
			lat: uni.getStorageSync('latitude'),
			lng: uni.getStorageSync('longitude'),
			page: friendFormData.page,
			user_id: userId.value
		})
		if (res.code == 200 && res.data) {
			if (friendFormData.page == 1) {
				userTaskList.value = res.data.data
			} else {
				userTaskList.value = userTaskList.value.concat(res.data.data)
			}
			// 判断是否还有数据
			if (res.data.current_page >= res.data.last_page) {
				friendFormData.loadStatus = 'nomore'
			} else {
				friendFormData.loadStatus = 'loadmore'
			}
		} else {
			friendFormData.loadStatus = 'nomore'
		}
	}
	const toChat = () => {
		let conversationID = userstore.userPageInfo.id
		uni.navigateTo({
			url: `/TUIKit/components/TUIChat/index?conversationID=C2C${conversationID}` + '&userId=' +
				conversationID
		});
	}
</script>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.my-bg {
		background-size: cover;
		width: 100%;
		// height: 750rpx;
	}

	.rank-list {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		padding: 0 40rpx;

		.avatar-box {
			image {
				border-radius: 50%;
				width: 120rpx;
				height: 120rpx;
			}
		}

		.rank-info {
			flex: 1;
			margin-left: 24rpx;

			.rank-item {
				display: flex;
				align-items: center;

				.nickname {
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}

				.auth {
					width: 90rpx;
					height: 36rpx;
					line-height: 36rpx;
					background: #FFFFFF;
					border-radius: 18rpx;
					border: 1rpx solid #D8D8D8;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
					text-align: center;
					margin-left: 8rpx;
				}

				.qiye-auth {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 8rpx;
					width: 92rpx;
					height: 36rpx;
					line-height: 36rpx;
					border-radius: 18rpx;
					border: 1rpx solid #FFA319;

					image {
						width: 20rpx;
						height: 20rpx;
					}

					.qiye {
						font-weight: 400;
						font-size: 22rpx;
						color: #FFA319;
					}
				}

				.self-auth {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 8rpx;
					width: 92rpx;
					height: 36rpx;
					line-height: 36rpx;
					border-radius: 18rpx;
					border: 1rpx solid #1980FF;

					image {
						width: 20rpx;
						height: 20rpx;
					}

					.self {
						font-weight: 400;
						font-size: 22rpx;
						color: #1980FF;
					}
				}
			}

			.adress-info {
				display: flex;
				align-items: center;
				margin-top: 22rpx;

				.age-tips {
					display: flex;
					align-items: center;
					// width: 88rpx;
					height: 32rpx;
					padding: 8rpx;
					background: #D9EAFF;
					border-radius: 20rpx;

					image {
						width: 20rpx;
						height: 20rpx;
					}

					.man-age {
						padding-left: 4rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #2484FF;
						text-align: center;
					}

					.woman-age {
						padding-left: 4rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #FF4770;
						text-align: center;
					}

				}

				.city-address {
					margin-left: 12rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}

		}

		.invite-btns {
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.introduce {
		padding: 40rpx 0 60rpx 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
	}

	.fans-num {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx 0 60rpx;

		.left-item {
			display: flex;

			.followers-item {
				.followers-num {
					font-weight: bold;
					font-size: 36rpx;
					color: #222222;
					text-align: center;
				}

				.followers-title {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					text-align: center;
				}

			}
		}

		.right-item {
			display: flex;

			.follower-btn {
				width: 160rpx;
				height: 58rpx;
				background: #FE3052;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 58rpx;
				text-align: center;
			}

			.send-btn {
				width: 160rpx;
				height: 58rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				border: 2rpx solid #222222;
				font-weight: 400;
				font-size: 24rpx;
				color: #222222;
				line-height: 58rpx;
				text-align: center;
			}

			.send-message {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 30rpx;
				width: 96rpx;
				height: 58rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				border: 2rpx solid #222222;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	// 取消关注
	.register-popup {
		padding: 40rpx 30rpx 72rpx 30rpx;

		.register-title {
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				flex: 1;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
			}

			.del-btn {

				width: 32rpx;
				height: 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.tips {
			padding: 100rpx 0;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #333;

			.recharge {

				color: #FE3052;
			}
		}

		.footer-btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 100rpx;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;

			.cancel {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #F6F6F6;
				color: #666666;
			}

			.confirm {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #FE3052;
				color: #fff;
			}
		}
	}
</style>